<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <script src = "../js/confetti.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

</head>
<body>
<style>
    canvas{
    display: block;
    z-index: 1;
    pointer-events: none;
    position: fixed;
    top: 0;
    }
</style>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">
    <div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#Catalog").hide().fadeIn();
            });
        </script>
    </div>
    <div id="BackLink">
        <a href="/catalog/viewMain">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <table class="table1">
            <tr>
                <th align="center" colspan="2" th:text="${#dates.format(order.orderDate,'yyyy/MM/dd hh:mm:ss')}">
                    Order #${sessionScope.order.orderId}
                </th>
            </tr>
            <tr>
                <th colspan="2">Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td th:text="${order.cardType}"></td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td th:text="${order.creditCard}">
                    * Fake
                    number!
                </td>
            </tr>
            <tr>
                <td>Expiry Date (MM/YYYY):</td>
                <td th:text="${order.expiryDate}"></td>
            </tr>
            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${order.billToFirstName}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${order.billToLastName}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${order.billAddress1}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${order.billAddress2}"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${order.billCity}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${order.billState}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${order.billZip}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${order.billCountry}"></td>
            </tr>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${order.shipToFirstName}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${order.shipToLastName}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${order.shipAddress1}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${order.shipAddress2}"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${order.shipCity}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${order.shipState}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${order.shipZip}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${order.shipCountry}"></td>
            </tr>
            <tr>
                <td>Courier:</td>
                <td th:text="${order.courier}"></td>
            </tr>
            <tr>
                <td colspan="2" th:text="'Status:'+${order.status}"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <th>Item ID</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total Cost</th>
                        </tr>
                            <tr th:each="lineItem:${order.lineItems}">
                                <td>
                                    <a th:href="@{'/catalog/viewItem?itemId='+${lineItem.item.itemId}}" th:text="${lineItem.item.itemId}">${lineItem.item.itemId}</a>
                                </td>
                                <td th:if="${lineItem.item}"
                                    th:text="
                         (${lineItem.item.attribute1}?${lineItem.item.attribute1}:'')+' '+
                         (${lineItem.item.attribute2}?${lineItem.item.attribute2}:'')+' '+
                         (${lineItem.item.attribute3}?${lineItem.item.attribute3}:'')+' '+
                         (${lineItem.item.attribute4}?${lineItem.item.attribute4}:'')+' '+
                         (${lineItem.item.attribute5}?${lineItem.item.attribute5}:'')+' '+
                         ${lineItem.item.product.name}">
                                    Description
                                    <i th:if="(!${lineItem.item})">{description unavailable}</i>
                                </td>

                                <td th:text="${lineItem.quantity}">${lineItem.quantity}</td>
                                <td th:text="${#numbers.formatDecimal(lineItem.unitPrice, 1, 'COMMA', 2, 'POINT')}"></td>
                                <td th:text="${#numbers.formatDecimal(lineItem.total, 1, 'COMMA', 2, 'POINT')}"></td>
                            </tr>
                        </c:forEach>
                        <tr>
                            <th colspan="5"
                                th:text="'Total:'+${#numbers.formatDecimal(order.totalPrice, 1, 'COMMA', 2, 'POINT')}">
                            </th>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>